<template>
  <view>
    <u-navbar :background="navBackground" :border-bottom="false">
      <view @click="sessionMenu" class="menu-wrap" slot="right"></view>
    </u-navbar>
    <div class="page">
      <div class="container">
        <div class="header">
          <image class="layer" src="/static/img/img_0.png" mode="widthFix" />
        </div>
        <div class="body">
          <div class="group">
            <div class="view">
              <view>
                <image style="width: 30px; height: 30px;" :src="redpacketDetail.redpacket.sender_avatar || '/static/default.png'"></image>
              </view>
              <span class="title">{{ redpacketDetail.redpacket.sender_nickname }}的红包</span>
            </div>
            <span class="book">{{ redpacketDetail.redpacket.title || '恭喜发财，大吉大利' }}</span>
          </div>

          <div class="group-1" v-if="!hideClaimInfo">
            <div class="view-1">
              <span class="count">{{ redpacketDetail.user_claim.amount }}</span>
              <span class="title-1">元</span>
            </div>
            <span class="title-2">已存入余额，可用于发红包</span>
          </div>
        </div>
      </div>

      <div class="container-1">
        <span class="caption">
          1个红包共{{ redpacketDetail.redpacket.amount_total }}元
          <template v-if="redpacketDetail.claims.length === 0">，待领取</template>
        </span>

        <div
          class="main"
          v-for="(claim, index) in redpacketDetail.claims"
          :key="index"
        >
          <view>
            <image
              style="width: 50px; height: 50px;"
              :src="claim.avatar || '/static/default.png'"
            ></image>
          </view>
          <div class="group-2">
            <div class="view-2">
              <span class="caption-1">{{ claim.nickname }}</span>
              <span class="title-3">{{ claim.amount }}元</span>
            </div>
            <span class="caption-2">{{ claim.claim_time }}</span>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
	import Config from "@/common/config.js"; // 本地配置数据
export default {
  data() {
    return {
      navBackground: { backgroundColor: '#f55545' },
      redpacketDetail: {
        redpacket: {},
        user_claim: {},
        claims: []
      },
      redPackedId: null,
      hideClaimInfo: false,
      chatSessionId: ''
    };
  },
  onLoad(options) {
    // 兼容 App，无 $route，统一使用 options 传参
    this.redPackedId = options.redPackedId;
    this.hideClaimInfo = options.selfOpen == 1;
    this.chatSessionId = options.id || '';

    this.getRedpacketDetail();
    
  },
  methods: {
    sessionMenu() {
      uni.navigateTo({
        url: '/pages/session-info/chat-setting?id=' + this.chatSessionId
      });
    },
    getRedpacketDetail() {
      const userinfo = uni.getStorageSync('userinfo');
      const userToken = userinfo.token;
      const userId = userinfo.id;
      console.log("user_id:" + userId);
      // console.log("this.redPackedId:" + this.redPackedId);

      this.$u
        .post(
          `https://${Config.baseUrl}/api/Redpacket/getRedpacketDetail?im_tourists_token=` + userToken,
          {
            user_id: userId,
            redpacket_id: this.redPackedId
          }
        )
        .then((res) => {
          if (res.status === 'success') {
            this.redpacketDetail = {
              redpacket: res.data.redpacket,
              user_claim: res.data.user_claim,
              claims: res.data.claims
            };
          } else {
            this.$refs.uToast?.show({
              title: res.message || '获取详情失败',
              type: 'error'
            });
          }
        })
        .catch((err) => {
          console.error('请求失败', err);
          this.$refs.uToast?.show({
            title: '网络异常',
            type: 'error'
          });
        });
    }
  }
};
</script>


<style>
	.page .caption-1 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		margin-left: 0;
		white-space: nowrap;
	}
	.page {
		background-color: rgba(241, 241, 241, 1);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 749rpx;
		height: 1334rpx;
	}

	.page .container {
		background-color: rgba(255, 255, 255, 1);
		padding-bottom: 67rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
	}

	.page .header {

		align-self: center;
		position: relative;
		width: 749rpx;
		height: 179rpx;
	}

	.page .layer {
		width: 749rpx;
		height: 179rpx;
		position: absolute;
		left: 50%;
		top: 0rpx;
		transform: translateX(-50%);
	}

	.page .icon-left-wrapper {
		position: absolute;
		left: 23rpx;
		top: 32rpx;
		width: 18rpx;
		height: 33rpx;
	}

	.page .icon-left {
		width: 18rpx;
		height: 33rpx;
		position: absolute;
		left: 50%;
		top: 0rpx;
		transform: translateX(-50%);
	}

	.page .body {
		display: flex;
		flex-direction: column;
		margin-top: 47rpx;
		justify-content: flex-start;
		align-self: center;
		width: 749rpx;
		padding: 0 12rpx;
	}

	.page .group {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		width: 339rpx;
	}

	.page .view {
		display: flex;
		justify-content: center;
		align-self: center;
		width: 263rpx;
	}

	.page .overlayer {
		background-color: rgba(247, 213, 121, 1);
		margin-left: 3rpx;
		align-self: center;
		width: 46rpx;
		height: 46rpx;
		border-radius: 10rpx;
	}

	.page .title {
		font-size: 37rpx;
		color: #000000;
		line-height: 37rpx;
		letter-spacing: 3.7rpx;
		lines: 1;
		align-self: center;
		margin-top: 2rpx;
		white-space: nowrap;
	}

	.page .book {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		white-space: nowrap;
		margin: 25rpx 0 0 47rpx;
	}

	.page .group-1 {
		display: flex;
		flex-direction: column;
		margin-top: 77rpx;
		justify-content: flex-start;
		align-self: center;
		width: 339rpx;
	}

	.page .view-1 {
		display: flex;
		justify-content: center;
		align-self: center;
		width: 339rpx;
	}

	.page .count {
		font-size: 110rpx;
		color: #ccad76;
		line-height: 110rpx;
		letter-spacing: 11rpx;
		lines: 1;
		margin-left: 1rpx;
		align-self: flex-end;
		white-space: nowrap;
	}

	.page .title-1 {
		font-size: 26rpx;
		color: #ccad76;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		margin-left: 18rpx;
		align-self: flex-end;
		white-space: nowrap;
	}

	.page .title-2 {
		font-size: 26rpx;
		color: #ccad76;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: center;
		white-space: nowrap;
		margin: 35rpx 0 0 1rpx;
	}

	.page .container-1 {
		background-color: rgba(255, 255, 255, 1);
		display: flex;
		flex-direction: column;
		margin-top: 14rpx;
		justify-content: flex-start;
		align-self: center;
		width: 749rpx;
		padding: 38rpx 12rpx 1000rpx;
	}

	.page .caption {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		margin-left: 22rpx;
		max-width: 681rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.page .main {
		display: flex;
		margin-top: 55rpx;
		justify-content: flex-start;
		align-self: center;
		width: 691rpx;
	}

	.page .mask {
		background-color: rgba(247, 213, 121, 1);
		align-self: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 10rpx;
	}

	.page .group-2 {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-self: center;
		height: 90rpx;
		width: 600rpx;
		padding: 8rpx 0 13rpx;
	}

	.page .view-2 {
		display: flex;
		justify-content: space-between;
		align-self: center;
		width: 600rpx;
	}

	.page .caption-1 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		lines: 1;
		margin-left: 26rpx;
		align-self: center;
		white-space: nowrap;
	}

	.page .title-3 {
		font-size: 32rpx;
		color: #000000;
		line-height: 32rpx;
		letter-spacing: 3.2rpx;
		lines: 1;
		align-self: center;
		margin-top: 2rpx;
		margin-left: 10px;
		white-space: nowrap;
	}

	.page .caption-2 {
		font-size: 26rpx;
		color: #b8b8b8;
		line-height: 26rpx;
		letter-spacing: 2.6rpx;
		lines: 1;
		align-self: flex-start;
		max-width: 550rpx;
		overflow: hidden;
		white-space: pre;
		text-overflow: ellipsis;
		margin: 18rpx 0 0 25rpx;
	}
</style>